<template>
<!--//!!!废弃 paid  0未支付  1已支付 -->
<!-- is_del  0正常订单  1删除订单 -->
<!-- is_cancel  0正常订单  1取消订单 -->
<!--//!!!废弃 status订单状态（0：待发货；1：待收货；2：待评价；3：已完成；-1：已退款） -->
<!-- （0待付款   1待发货    5确认日期   8上传文件   10待收货  15待评价 20已完成   -1已退款）5和8只针对服务商品 -->
<!-- verify_status 支付凭证状态 0待提交 1待审核  2通过  3拒绝-->
  <div class="order-details">
    <div class="info-wrap">
      <div class="title-wrap">
        <div class="order-info-title">订单信息</div>
        <div class="receiver-info-title">收件人信息</div>
      </div>

      <div class="content-wrap">
        <div class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：{{ info.order_mer_sn }}</div>
            <!-- 状态判断 -->
            <div
              class="item order-status"
            >
              <!-- <img class="icon" src="~/assets/images/blue-exclamation-mark.png" alt="" /> -->
              订单状态：{{info|statusText}}
            </div>
            <div class="item order-payment">
              支付方式：{{ info.pay_type == 3 ? "线下支付" : "线上支付" }}
            </div>
            <!-- 非删除和关闭状态才显示 -->
            <div v-if='info.is_del==0&&info.is_cancel==0'>
              <!-- 公共信息 -->
              <div class="item order-prompt" v-if="info.status == 0&&info.cancel_time">
                请在 {{info.cancel_time}} 前付款，超时订单自动关闭
              </div>
              <div class="item order-payment" v-if="info.status == 10||info.status == 15">
                快递单号：{{ info.delivery_sn }}
              </div>
              <!-- 线下待付款 -->
              <div v-if="info.pay_type == 3">
                <!-- 识别码 -->
                <div class="item order-identifier" v-if="info.verify_code">
                  <span>订单识别码：</span>
                  <p
                    style="
                      font-size: 30px;
                      color: #077cd3;
                      font-weight: bold;
                    "
                  >
                    {{ info.verify_code }}
                  </p>
                </div>
                <!-- 支付凭证 -->
                <div class="item order-upload mtp20">
                  <div>支付凭证：</div>
                  <div class="upbox">
                    <div class="picBox" v-if="info.verify_img">
                      <img :src="info.verify_img" class="objectCover" />
                    </div>
                    <MUploadSingle @getPic="getPayPic" 
                    v-if="info.status==0&&(info.verify_status===0||info.verify_status===3)" />
                  </div>
                </div>
              </div>
              <!-- 配套服务信息 -->
              <div v-if="isServer">
                <!-- 待确认日期状态才显示 -->
                <div v-if="info.status==5" style="display:flex;justify-content: center;margin-top:20px">
                  <m-select v-model="selected" placeholder='请选择快递公司' :options="expressOptions"/>
                  <m-button style="margin-left:20px" width="90" type="bordered"
                  @click="$refs.OrderTable.talkOrder(info)"
                  >
                    协商取消
                    </m-button>
                </div>
                <!--//todo 确定日期text -->
                <div class="item order-payment" v-if="info.status == 8||info.status == 15||info.status == 20">
                  商家确定日期：{{ info.business_date }}
                </div>
                <!--//todo 文件备注text -->
                <div class="item order-payment" v-if="info.status == 15||info.status == 20">
                  文件备注：{{ info.business_remark }}
                </div>
                 <!--//todo 附件text -->
                <div class="item order-payment" v-if="info.status == 15||info.status == 20">
                  附件：
                  <a target="_blank" :href="item" v-for="(item,index) in info.business_files||[]" :key="index">
                    {{ item }}
                  </a>
                </div>
              </div>
            </div>
          </div>
          <!-- 删除 -->
          <!-- <div  class="btns" v-if="info.is_del == 1">
            <div class="btn" @click="$refs.OrderTable.delOrder(info)">删除订单</div>
          </div> -->
          <div class="btns" v-if='info.is_del==0&&info.is_cancel==0'>
            <!-- 待收货 -->
            <div v-if="info.status == 10" class="btns">
              <div class="btn btn1" @click="$refs.OrderTable.toLogistics(info)">查看物流</div>
              <div class="btn" @click="$refs.OrderTable.sureOrder(info)" > 确认收货 </div>
            </div>
            <!-- 待评价 -->
            <div v-if="info.status == 15" class="btns">
              <div class="btn btn1" @click="$refs.OrderTable.toLogistics(info)" v-if="!isServer">查看物流</div>
              <div class="btn"  @click="$refs.OrderTable.pushToEvaluation(info)">立即评价</div>
            </div>
            <!-- 线下待付款 -->
            <MButton
              class="btn"
              v-if="info.status == 0 && info.pay_type == 3&&(info.verify_status===0||info.verify_status===3)"
              @click="payUnderline"
              :loading='isPaing'
              width='125'
              style="height:45px;"
            >
              提交
            </MButton>
            <!-- 线上待付款 -->
            <div v-if="info.status == 0 && info.pay_type != 3" class="btns">
              <PayMethods ref='PayMethods' ulClass='purchase-management-OrderDetails-PayMethods' @changeMethods='activePayMethod=$event'/>
              <MButton width='125' class="btn" style="margin:20px auto 0;height:45px" @click="linePay" :loading='isPaing'>立即付款</MButton>
            </div>
            <!-- 配套服务按钮 -->
             <div v-if="isServer" class="btns" style="width:100%">
               <MButton
                class="btn"
                v-if="info.status==5"
                @click="sureExpress"
                :loading='isPaing'
                width='125'
                style="height:45px;margin:0 auto;"
              >
                提交
              </MButton>
             </div>
          </div>
        </div>

        <!-- 已关闭 -->
        <!-- <div v-if="false" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/blue-exclamation-mark.png" alt="" />订单状态：已关闭
            </div>
          </div>
          <div class="btn">删除</div>
        </div> -->

        <!-- 已完成 -->
        <!-- <div v-if="false" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/yellow-success-mark.png" alt="" />订单状态：已完成
            </div>
            <div class="item order-payment">支付方式：线上支付</div>
          </div>
          <div class="btn" @click="pushToEvaluation">立即评价</div>
        </div> -->

        <div class="receiver-info-content">
          <div class="texts">
            <div class="item receiver-name">收货人：{{ info.real_name }}</div>
            <div class="item receiver-mobile">电话：{{ info.user_phone }}</div>
            <div class="item receiver-address">地址：{{ info.user_address }}</div>
            <div class="item receiver-remarks">备注信息：{{ info.mark || "暂无" }}</div>
          </div>
        </div>
      </div>
    </div>

    <OrderTable :isServer='isServer' @reload='getInfo' ref='OrderTable' :listStatus='2' :list='[info||{}]'/>
     
  </div>
</template>

<script>
import {
  Col,
  Dialog,
  Input,
  Row,
  Table,
  TableColumn,
  Upload,
} from "element-ui"
import MDialog from "@/components/common/m-dialog/MDialog"
import MInput from "@/components/common/m-input/MInput"
import MButton from "@/components/common/m-button/MButton"
import MUpload from "@/components/common/m-upload/MUpload"
import MUploadSingle from "@/components/common/m-upload/MuploadSingle"
import OrderTable from '../components/OrderTable'
import PayMethods from "@/components/PayMethods"
import MSelect from '@/components/common/m-select/MSelect'
import {
  myOrderDe,
  myOrderPayForm,
  getPhoneCaptcha,
  receiptOrder,
  myOrderDetail,
  unlinePayOrder,
  linePayOrder
} from "@/request/api"

export default {
  name: "OrderDetails",
  components: {
    MButton,
    MInput,
    MDialog,
    Table,
    TableColumn,
    Upload,
    Dialog,
    Input,
    Row,
    Col,
    MUpload,
    MUploadSingle,
    OrderTable,
  PayMethods,
  MSelect
  },
  props: {
    isServer: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      orderId: "",
      info: {
        verify_img: ""
      },
      details: {},
      showDialog1: false,
      showDialog1Msg: "",
      showDialog2: false,
      showDialog3: false,
      showDialog4: false,
      optionType: "",
      reason: "",
      content: "获取验证码",
      totalTime: 60,
      flag: false,
      yzm: "",
      activePayMethod:'',//当前支付方式
      isPaing:false,//正在支付
      expressOptions: [
        { label: '无需快递', value: 'none' },
        { label: '顺丰快递', value: 'shunfeng' },
        { label: '中通快递', value: 'zhongtong' }
      ],
      selected:'',//当前选择的快递
    }
  },
  filters: {
    statusText(info) {
      let text = ''
      if(info.is_del==1) {
        text = '订单已删除'
      }else if(info.is_cancel==1) {
        text = '订单已取消'
      }else {
        text = {
          "-1": "已退款",
          0: "待付款",
          1: "待发货",
          5: "等待商家确认日期中",
          8: "等待商家发送确认文件",
          10: "待收货",
          15: "待评价",
          20: "已完成",
        }[String(info.status)]
      }
      return text
      // return {
      //   1: "已支付",
      //   0: "待付款",
      //   "-1": "已关闭",
      //   2: "待发货",
      //   3: "待收货",
      //   4: "待评价",
      //   5: "已完成"
      // }[status]
    }
  },
  created() {
    this.orderId = this.$route.query.id
    this.getInfo()
  },
  methods: {
    //todo 确认日期 快递公司选择后提交
    sureExpress() {
      if(!this.selected) {
        return this.$message.error('请选择快递公司！')
      }
      console.log(this.selected);
    },
    // 线上付款
    async linePay() {
      if(!this.activePayMethod) {
        return this.$message.error('请选择付款方式！')
      }
      this.isPaing = true
      try {
        const res = await linePayOrder({
          group_order_id:this.info.group_order_id,
          pay_type:this.activePayMethod
        })
        console.log(res);
        if(this.activePayMethod === 'alipay') {
          this.$refs.PayMethods.zfbPay(res.data.result.config)
        }else if(this.activePayMethod === 'weixin') {
          this.$refs.PayMethods.wxPay(res.data.result)
        }
      }finally {
        this.isPaing = false
      }
    },
    // 线下支付提交
    async payUnderline() {
      if (!this.info.verify_img) {
        this.$toastVant("请上传支付凭证！")
        return
      }
      let data = {
        group_order_id: this.info.group_order_id,
        img: [this.info.verify_img],
      }
      this.isPaing = true
      try{
        await unlinePayOrder(data)
        this.$message.success("提交成功！")
        this.getInfo()
      } finally {
        this.isPaing = false
      }
    },
    // 上传支付凭证
    getPayPic(url) {
      this.$set(this.info,'verify_img',url)
    },
    getInfo() {
      this.$toastVant.loading("加载中")
      myOrderDetail(this.orderId).then((res) => {
        this.$toastVant.clear()
        this.info = res.data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
  }
}
</script>
<style lang='scss'>
.purchase-management-OrderDetails-PayMethods {
  display: flex;
  justify-content: space-between
}
</style>
<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.order-details {
  padding-bottom: 200px;
  .yzmBtn {
    /deep/ .el-button {
      background: #fff !important;
    }
  }
  .optionItem:hover {
    color: $theme-color-1;
  }
  .closeBtn /deep/ .el-button {
    width: 160px;
  }
  .info-wrap {
    border: solid 1px #eaeaea;
    margin-bottom: 40px;

    .title-wrap {
      height: 56px;
      background-color: #f3f4f7;
      color: #666;
      font-weight: bold;
      font-size: 16px;
      line-height: 56px;
      padding: 0 15px;
      display: flex;

      .order-info-title,
      .receiver-info-title {
        width: 50%;
      }

      .receiver-info-title {
        padding-left: 15px;
      }
    }

    .content-wrap {
      display: flex;

      .order-info-content,
      .receiver-info-content {
        padding: 30px;
        width: 50%;
        border-right: solid 1px #eaeaea;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        &:last-of-type {
          border-right: none;
        }

        .texts {
          width: 100%;
          margin-bottom: 30px;

          .item {
            margin-bottom: 10px;
            display: flex;
            align-items: flex-end;

            .icon {
              margin-right: 5px;
            }
          }
          .order-identifier {
            display: flex;
            align-items: center;
            height: 30px;
          }
          .order-upload {
            // display: block;
            align-items: center;
            display: flex;
            .picBox {
              width: 120px;
              height: 120px;
              margin-top: 20px;
              margin-bottom: 20px;
              border: 1px solid #eee;
              border-radius: 10px;
              overflow: hidden;
            }
            .upbox {
              /deep/ .picBox {
                margin-top: 0;
                margin-right: 0;
              }
            }
            /deep/ .el-upload {
              margin-top: 20px;
            }
            /deep/ .m-button {
              margin-top: 20px;
            }
            /deep/ .el-upload-list__item {
              width: 100px;
              height: 100px;
              margin-top: 20px;
            }
          }
          /deep/ .el-upload--picture-card {
            width: 73px;
            height: 73px;
            background-color: #fff;
            border: none;
            position: relative;
          }

          .close {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            color: #d1d1d1;
            border: 1px solid #d1d1d1;
            background: #fff;
          }
        }
        .btns {
          display: flex;
          flex-wrap: wrap;
        }
        .btn {
          width: 112px;
          height: 40px;
          margin: 0 10px 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: $theme-color-1;
          color: #fff;
          font-size: 16px;
          border-radius: 10px;
          cursor: pointer;
        }
        .btn1 {
          background: #fff;
          color: $theme-color-1;
          border: 1px solid $theme-color-1;
        }
      }
    }
  }

  .table-head {
    background-color: #f3f4f7;
    margin-bottom: 40px;

    /deep/ .el-table__body-wrapper {
      height: 0;
    }

    /deep/ th {
      color: #666;
      background-color: #f3f4f7;
    }
  }

  .order-head {
    height: 40px;
    background-color: #f3f4f7;
    color: #666;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .left,
    .right {
      display: flex;
      align-items: center;
    }

    .order-merchant,
    .order-after-sale {
      margin-right: 25px;
    }

    .order-after-sale {
      width: 85px;
      height: 30px;
      background-color: #fff;
      border-radius: 10px;
      font-size: 16px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
    }
  }

  .pay {
    display: inline-block;
    width: 80px;
    height: 30px;
    background-color: $theme-color-1;
    color: #fff;
    border-radius: 10px;
    line-height: 30px;
    text-align: center;
  }

  .dialog {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 40px;

      .item {
        width: 240px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;

        img {
          margin-right: 15px;
        }
      }
    }

    .bottom {
      display: flex;
      justify-content: center;
      margin-bottom: 15px;

      .btn {
        width: 260px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: $theme-color-1;
        border-radius: 10px;
      }
    }

    // 确认收货弹窗
    .confirm-dialog-content {
      .el-row {
        margin-bottom: 20px;

        .el-col {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
